<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>斜角页签</title>
		<style>
			/*html w/h必须先设100%,才有具体尺寸；否则后面的100%无效。*/
			html{
				width:100%;
				height:100%;
			}
			body{
				position: relative;	
				background-color: #b0d0f0;
				width:99%;
				height:99%;
				overflow: hide;
				margin: 0px;
				padding: 0px;
			}
            
            body{
                --bgcolor-v1-navi: #D7D7E0; /* Tab 头部导航区 */
                --bgcolor-v2-acti: #f7f7ff; /* 活动色 */
                --bgcolor-v3-diacti: #e7e7f0; /* 非活动色 */
            }
            
			.div_bg{
				position: relative;				
				background-color: #d0d0e0;
				width: 95%;
				height: 95%;
				--border: solid 4px green;
				overflow: hide;
                margin: 12px;
			}
			.div1{
				position: relative;				
				background-color: var(--bgcolor-v1-navi); /* #D7D7E0; */
				--border: solid 2px #104080;
                ---border: solid 1px red;
				height:64px;
				width:100%;
				display: inline-flex;
			}
			.div12{
              background-color: #e0e0e0;
			  ---border: solid 1px red;
			  position: relative;				
			  height:100%;
			  width:20%;
			}
            .divctx{
                background-color: #f7f7ff;
                ---border: solid 1px green;
				height:calc(100% - 64px);
				width:100%;
            }
            
            .xiejiao[active="true"]{
                --bgcolor-xiejiao: var(--bgcolor-v2-acti); /* #f7f7ff; */
                z-index: 10;
            }
            .Xxiejiao{
                --bgcolor-xiejiao: var(--bgcolor-v3-diacti); /* #e7e7f0; */
            }
            .xiejiao:not([active="true"]){
                --bgcolor-xiejiao: var(--bgcolor-v3-diacti); /* #e7e7f0; */
            }
            
            /*斜角*/
            .xiejiao{
                background: var(--bgcolor-xiejiao);
                clip-path:
                           polygon(5px 0%, calc(100% - 20px) 0%,
                             100% 100%,0% 100%, 0% 50%);
                ---padding: 4px;
            }
            
            /*非第1个元素，向左移位，形成叠压感 */
            .xiejiao:not(:first-child){
              margin-left: -10px;
            }
            .xiejiao-ctx{
              --border: solid 1px red;
			  height:99%;
			  width:99%;
              margin-left: 4px;
              margin-right: 8px;
            }
            .txtac{
              text-align: center;
            }
            .flexi{
              display: flex;
                flex-direction: row;
                justify-content: center;
                align-items: center;
            }
            
 /*
 linear-gradient(100deg, transparent 10px, #e7e7f0 0) top left,
 */
 /*
 .xiejiao{
     background: 
                 linear-gradient(-130deg, transparent 40px, #e7e7f0 0) top right;
     background-size: 100% 100%;
     background-repeat: no-repeat;
 }
 .xiejiao[active]{
     background: linear-gradient(-130deg, transparent 40px, #f7f7ff 0) top right;
     background-size: 100% 100%;
     background-repeat: no-repeat;
     z-index: 10;
 }
 .xiejiao{
     border-top: 0;
     border-bottom: 50px solid black;
     border-right: 5px solid transparent;
     border-left: 5px solid transparent; 
     height: 0px;
 }
 */
 /*梯形
 .rdda-div-tixing{
	float: left;
	width: 155px;
    height: 0px;
    border-top: 0px;
    border-bottom: 60px solid #155681;
    border-right: 60px solid transparent;
	border-left: 60px solid transparent;
	text-align: center;
	line-height: 60px;	
}           
*/

		</style>
	</head>
	<body>
		<div id="div_bg1" class="div_bg">
			<div id="div1" class="div1">
                <div class="div12 xiejiao" active="false" >
                    <div class="xiejiao-ctx flexi">
                    First Tab
                    </div> 
                </div>
                <div class="div12 xiejiao" active="true">
                    <div class="xiejiao-ctx flexi">
                    Second Tab
                    </div> 
                </div>                
                <div class="div12 xiejiao">
                    <div class="xiejiao-ctx flexi">
                    Third Tab
                    </div> 
                </div>                
			</div>
            <div id="divctx" class="divctx">
            </div>
		</div>
	</body>
</html>
